<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>系统常态化运行评分系统</title>
    <link rel="stylesheet" href="../component/pear/css/pear.css" />
    <style>
        .expand.pear-btn:hover {
            color: currentColor;
            background: none;
        }

        .icon-preview {
            font-size: 30px !important;
            cursor: pointer;
        }
    </style>
</head>

<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-card" style="margin-top: 10px;">
                <form class="layui-form" action="" onsubmit="return false" lay-filter="lay-info">
                    <input type="hidden" name="id" />
                    <div style="float: right;">
                        <button id="upload-btn-save" class="pear-btn pear-btn-primary pear-border-blue pear-btn-xs" title="保存佐证材料(以下四种方式，至少选择一种)">
                            <i class="layui-icon layui-icon-success"></i>
                            保存佐证材料
                        </button>
                    </div>
                    <div class="layui-form-item">
                        <h3>图片（格式限制为png、jpg、jpeg）</h3>
                        <div class="upload-container">
                            <input type="file" id="uploadImg" style="display: none;" accept=".png, .jpg, .jpeg" />
                            <div class="preview-container">
                                <div class="preview-container" id="div_imgs">
                                    <!-- <div class="image-item">
                                        <img src="path-to-image.jpg" alt="Image description" class="preview-image" click="previewFile('')">
                                        <button class="delete-btn"  click="delFile('')">
                                            <i class="layui-icon layui-icon-delete"></i>
                                        </button>
                                    </div> -->
                                </div>
                                <div class="preview-container">
                                    <div class="image-item">
                                        <button id="upload-btn-img" class="layui-btn layui-btn-primary upload-btn">
                                            <i class="layui-icon layui-icon-add-1 layui-font-22"></i><br />
                                            添加图片
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <h3>文件（格式限制为pdf）</h3>
                        <div class="upload-container">
                            <input type="file" id="uploadFile" style="display: none;" accept=".pdf" />
                            <div class="preview-container">
                                <div class="preview-container"  id="div_files">
                                    <!-- <div class="image-item">
                                        <img src="path-to-image.jpg" alt="Image description" class="preview-image">
                                        <button class="delete-btn">
                                            <i class="layui-icon layui-icon-delete"></i>
                                        </button>
                                    </div> -->
                                </div>
                                <div class="preview-container">
                                    <div class="image-item">
                                        <button id="upload-btn-file" class="layui-btn layui-btn-primary upload-btn">
                                            <i class="layui-icon layui-icon-add-1 layui-font-22"></i><br />
                                            添加文件
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <h3>视频(格式限制为mp4)</h3>
                        <div class="upload-container">
                            <input type="file" id="uploadVideo" style="display: none;" accept=".mp4" />
                            <div class="preview-container">
                                <div class="preview-container" id="div_videos">
                                    <!-- <div class="image-item">
                                        <img src="path-to-image.jpg" alt="Image description" class="preview-image">
                                        <button class="delete-btn">
                                            <i class="layui-icon layui-icon-delete"></i>
                                        </button>
                                    </div> -->
                                </div>
                                <div class="preview-container">
                                    <div class="image-item">
                                        <button id="upload-btn-video" class="layui-btn layui-btn-primary upload-btn">
                                            <i class="layui-icon layui-icon-add-1 layui-font-22"></i><br />
                                            添加视频
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <h3>音频（格式限制为mp3）</h3>
                        <div class="upload-container">
                            <input type="file" id="uploadAudio" style="display: none;" accept=".mp3" />
                            <div class="preview-container">
                                <div class="preview-container" id="div_audios">
                                    <!-- <div class="image-item">
                                        <img src="path-to-image.jpg" alt="Image description" class="preview-image">
                                        <button class="delete-btn">
                                            <i class="layui-icon layui-icon-delete"></i>
                                        </button>
                                    </div> -->
                                </div>
                                <div class="preview-container">
                                    <div class="image-item">
                                        <button id="upload-btn-audio" class="layui-btn layui-btn-primary upload-btn">
                                            <i class="layui-icon layui-icon-add-1 layui-font-22"></i><br />
                                            添加音频
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>


        <script src="../component/layui/layui.js"></script>
        <script src="../component/pear/pear.js"></script>
        <script src="../scripts/utils/request.js"></script>
        <script src="../scripts/utils/auth.js"></script>
        <script>

            function previewFile(url){
                window.open(url)
            }
            function delFile(obj,url){
                postAjax('/api/cl/removeMinePfZb',{'parentPath':url},function(response){
                    $(obj).parent().remove()
                },null)
            }

            var $, table, form, drawer, popup, notice;
            layui.use(['table', 'form', 'jquery', 'drawer', 'popup', 'notice'], function () {
                table = layui.table;
                form = layui.form;
                $ = layui.jquery;
                drawer = layui.drawer;
                popup = layui.popup;
                notice = layui.notice;

                var zbDetailsId = getUrlParams("zbDetailsId");
                var pfId = getUrlParams("pfId");
                var mineId = getUrlParams("mineId");
                if (zbDetailsId === undefined || zbDetailsId === null || zbDetailsId === "") {
                    notice.error("加载参数错误！");
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                    return;
                }
                if (pfId === undefined || pfId === null || pfId === "") {
                    notice.error("加载参数错误！");
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                    return;
                }
                if (mineId === undefined || mineId === null || mineId === "") {
                    notice.error("加载参数错误！");
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                    return;
                }

                $('#upload-btn-img').click(function() {
                    mockClick('uploadImg');
                });
                $('#upload-btn-file').click(function() {
                    mockClick('uploadFile');
                });
                $('#upload-btn-video').click(function() {
                    mockClick('uploadVideo');
                });
                $('#upload-btn-audio').click(function() {
                    mockClick('uploadAudio');
                });

                function mockClick(element){
                    $('#'+element).click();
                }

                function uploadtoServer(type){
                    let file;
                    if(type==1){
                        file=$('#uploadImg')[0].files[0];
                    }else if(type==2){
                        file=$('#uploadFile')[0].files[0];
                    }else if(type==3){
                        file=$('#uploadVideo')[0].files[0];
                    }else if(type==4){
                        file=$('#uploadAudio')[0].files[0];
                    }
                    let url=`/api/cl/uploadMinePfZb?mineId=${mineId}&pfId=${pfId}&zbDetailsId=${zbDetailsId}`
                    uploadFileBase(url,file,function(response){
                        appendHtml(response.data,type)
                    },null);
                }


                $('#uploadImg').change(function() {
                    uploadtoServer(1)
                });
               
                $('#uploadFile').change(function() {
                    uploadtoServer(2)
                });

                $('#uploadVideo').change(function() {
                    uploadtoServer(3)
                });

                $('#uploadAudio').change(function() {
                    uploadtoServer(4)
                });

                function appendHtml(url,type){
                    let imgPath;
                    let description;
                    let element;
                    if(type==1){
                        imgPath=url;
                        description="图片佐证材料"
                        element='div_imgs'
                    }else if(type==2){
                        imgPath='/admin/images/file.png';
                        description="文件佐证材料"
                        element='div_files'
                    }else if(type==3){
                        imgPath='/admin/images/video.png';
                        description="视频佐证材料"
                        element='div_videos'
                    }else if(type==4){
                        imgPath='/admin/images/audio.png';
                        description="音频佐证材料"
                        element='div_audios'
                    }
                    let html=$('#'+element).html();
                    html+=`
                            <div class="image-item" data="${url}">
                                <img src="${imgPath}" alt="点击查看${description}详情" class="preview-image" onclick="previewFile('${url}')">
                                <button class="delete-btn" onclick="delFile(this,'${url}')">
                                    <i class="layui-icon layui-icon-delete"></i>
                                </button>
                            </div>
                    `
                    $('#'+element).html(html)
                }
                
                function getFile(element){
                    let imgElements = $('#'+element).find('.image-item');
                    let imgUrls = [];
                    imgElements.each(function () {
                        let data = $(this).attr('data');
                        imgUrls.push(data);
                    });
                    return imgUrls.join(',');
                }

                /**
                 * 保存
                 */
                $('#upload-btn-save').click(function () {
                    //获取 div_imgs 下面样式为 image-item 的元素，并获取data属性的值
                    let pictureUrl = getFile('div_imgs');
                    let fileUrl = getFile('div_files');
                    let videoUrl = getFile('div_videos');
                    let audioUrl = getFile('div_audios');
                    if(pictureUrl.length==0&&fileUrl.length==0&&videoUrl.length==0&&audioUrl.length==0){
                        parent.notice.error("请至少上传一张图片或一个文件或一个视频或一个音频！");
                        return;
                    }
                    let reqData={
                        pictureUrl:pictureUrl,
                        fileUrl:fileUrl,
                        videoUrl:videoUrl,
                        audioUrl:audioUrl,
                        mineId:mineId,
                        pfId:pfId,
                        zbDetailsId:zbDetailsId
                    }
                    postAjax('/api/cl/saveMinePfZb',reqData,function(response){
                        parent.notice.success('保存成功！');
                        parent.refreshTable();
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    },null);
                })
            })
        </script>


        <style>
            .upload-container {
                width: 100%;
                margin: 10px 0;
            }

            .upload-btn {
                padding: 10px;
                font-size: 16px;
                cursor: pointer;
                width: 100%;
                height: 100%;
            }

            .preview-container {
                display: flex;
                flex-wrap: wrap;
                margin-top: 5px;
            }

            .image-item {
                position: relative;
                margin: 5px;
                width: 80px;
                /* 根据需要调整 */
                height: 100px;
                /* 根据需要调整 */
                border: 1px solid #ddd;
            }

            .preview-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                cursor: pointer;
                /* 确保图片填充整个容器 */
            }

            .edit-btn,
            .delete-btn {
                position: absolute;
                top: 2px;
                font-size: 12px;
                padding: 5px;
                cursor: pointer;
                border: none;
                background-color: rgba(255, 255, 255, 0.8);
                border-radius: 50%;
            }

            .edit-btn {
                right: 30px;
            }

            .delete-btn {
                right: 5px;
            }

            /* 鼠标悬停时显示编辑和删除按钮 */
            .image-item:hover .edit-btn,
            .image-item:hover .delete-btn {
                display: block;
            }
        </style>
</body>

</html>